<template>
  <div class="price">
    <priceDetailBar :priceObj="priceObj"></priceDetailBar>

    <div class="price-dom-box">
      <div class="price-dom">
        <p class="name">{{priceObj.kname}}</p>
        <p class="num" >
          {{priceObj.price}}
          <span class="dw">{{priceObj.unit}}</span>
        </p>
        <p class="numqj"  v-if="!priceQj">{{priceObj.minPrice}}~{{priceObj.maxPrice}}</p>
      </div>
      <div class="price-dom">
        <p class="pyesto">
          <van-icon :name="iconzr" />昨日
        </p>
        <p class="pyesto-num" :class="{pyesm30:priceQj}">
          {{priceObj.oldPrice}}
          <span class="dw">{{priceObj.unit}}</span>
        </p>
        <p class="pyesto-numqj"  v-if="!priceQj">{{priceObj.oldMinPrice}}~{{priceObj.oldMaxPrice}}</p>
        <p class="pyesto">
          <van-icon :name="iconzt" />涨跌
        </p>
        <p class="num-status">
          <span :class="priceObj.flag">{{priceObj.gain}}</span>
          <span :class="priceObj.flag">{{priceObj.per}}</span>
        </p>
      </div>
    </div>
    <div class="show-p">
      <p class="p1">
        <van-icon :name="iconrq" />
        <span>{{priceObj.inputdate}}</span>
      </p>
      <p class="p1">
        <van-icon :name="icondz" />
        {{priceObj.origin}}
      </p>
      <p class="p2 dh" style="padding:0 0.3rem 0 0">备注：{{priceObj.remark}}</p>
    </div>

    <table class="table-dom" style="width: 100%;table-layout: fixed">
      <thead>
        <tr class="table-title" v-if="list.length>0">
          <td  style="width:1.6rem;" >品名/规格</td>
          <td >产地</td>
          <td  style="width:2rem;">{{priceText}}</td>
          <td  >涨跌</td>
          <td >备注</td>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(i,index) in list"
          :key="index"
          @click="hrefs('/priceQs',i)"
          class="table-item"
          :class="'table-item-'+i.flag"
        >
          <td class="table-item-list guige" span="6">
            <p>{{i.kname}}</p>
            <p>{{i.specs}}</p>
          </td>
          <td class="table-item-list">
            <p>{{i.origin}}</p>
          </td>
          <td class="table-item-list table-item-price">
            <p>{{i.price}}</p>
            <p class="priceQj" v-if="!priceQj">{{i.minPrice}}~{{i.maxPrice}}</p>
          </td>
          <td class="table-item-list table-item-status">
            <p>{{i.gain}}</p>
          </td>
          <td class="table-item-list remark">
            <p class="dh2">{{i.remark}}</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script type="text/ecmascript-6">
import iconrq from "../../assets/img/price/iconrq.png";
import icondz from "../../assets/img/price/icondz.png";
import iconzr from "../../assets/img/price/iconzr.png";
import iconzt from "../../assets/img/price/iconzt.png";
import loginForm from "../../components/login/index";
import priceDetailBar from "../../components/nav/priceDetailBar";
import { getchannelpricedetail, getchannelpricelist } from "../../api/price.js";

export default {
  components: {
    loginForm,
    priceDetailBar
  },
  data() {
    return {
      iconzr,
      iconzt,
      iconrq,
      icondz,
      checked: false,
      tardeNum: 0,
      priceObj: {},
      isLogin: false,
      list: [],
       priceText: this.$route.query.channel === "dlg" ?  "价格" : "均价/价格区间" ,
      priceQj: this.$route.query.channel === "dlg" ?  true : false
    };
  },
  methods: {
    hrefs(url, i) {
      // i.id = i.nowid;
      this.$router.push({ path: url, query: i });
    },
    showloginway() {
      this.showlogin = true;
    },
    getPrciobj() {
      let obj = {
        channel: this.$route.query.channel,
        id: this.$route.query.id
      };
      getchannelpricedetail(obj).then(res => {
        console.log("dange单挑", res);
        if (res.code == "0000") {
          this.priceObj = res.data;
          if (this.priceObj.flag == "normal") {
            this.priceObj.gain = "--";
            this.priceObj.per = "--";
          }
          this.priceObj.cid = this.priceObj.catId;
        }
      });
    },
    getchannelpricelist() {
      let obj = {};
      obj.cid = this.$route.query.catId;
      obj.channel = this.$route.query.channel;
      obj.nid=this.$route.query.id;
      getchannelpricelist(obj).then(res => {
        console.log("行情列表", res);
        if (res.code == "0000") {
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            if (element.flag == "normal") {
              element.gain = "--";
              element.per = "--";
            }
          }
          this.list = res.data;
        }
      });
    }
  },
  created() {
    this.getPrciobj();
    this.getchannelpricelist();
  }
};
</script>
<style scoped lang="less">
.price {
  width: 100%;
  min-height: 100%;
  background: #183a60 url("../../assets/img/price/iconbg.png") no-repeat;
  color: rgba(255, 255, 255, 0.6);
}

.price-dom-box {
  margin-bottom: 0.2rem;
  display: flex;
  .van-icon {
    font-size: 0.2rem;
    margin-right: 0.1rem;
  }
  .price-dom {
    line-height: 1.5;
    flex: 1;
    padding-left: 0.3rem;
    padding-top: 0.3rem;
  }
  .name {
    font-size: 0.34rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.34rem;
  }
  .num {
    font-size: 0.6rem;
    // font-weight: bolder;
    color: rgba(255, 255, 255, 1);
  }
  .dw {
    font-size: 0.2rem;
    color: rgba(255, 255, 255, 0.6);
  }
  .pyesto {
    display: flex;
    align-items: center;
    font-size: 0.22rem;
  }
  .pyesto-num {
    font-size: 0.32rem;
    color: #ffffff;
    margin: 0.1rem 0 0rem;
    padding-left: 0.4rem;
    line-height: 1;
    &.pyesm30{
      margin-bottom: .2rem
    }
  }
  .pyesto-numqj {
    font-size: 0.22rem;
    margin: 0.05rem 0 0.15rem;
    padding-left: 0.4rem;
  }
  .num-status {
    margin: 0.1rem 0 0.1rem;
    padding-left: 0.4rem;
    font-size: 0.32rem;
    display: flex;
    span {
      margin-right: 0.3rem;
    }
    .up {
      color: #d82d27;
    }
    .down {
      color: #37a10c;
    }
  }
}
.show-p {
  display: flex;
  font-size: 0.24rem;
  margin-bottom: 0.6rem;
  color: rgba(255, 255, 255, 0.8);
  min-height: 0.4rem;
  line-height: 0.4rem;
  p {
    flex: 1;
  }
  .p1 {
    display: flex;
    // align-items: center;
    justify-content: flex-start;
    width: 33.333%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.3rem;
  }
  .van-icon {
    font-size: 0.4rem;
    margin-right: 0.05rem;
  }
}

.van-dropdown-menu {
  height: 0.88rem;
}
.table-title {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.26rem;
  text-align: center;
  border-bottom: 0.01rem solid rgba(255, 255, 255, 0.1);
}

.table-item {
  text-align: center;
  font-size: 0.26rem;
  line-height: 1.2;
  color: rgba(255, 255, 255);

  min-height: 1.08rem;
  padding: 0.2rem 0;
  &:nth-child(2n + 1) {
    background: rgba(255, 255, 255, 0.05);
  }
  .priceQj {
    margin: 0 0.1rem;
    font-size: 0.2rem;
    color: rgba(255, 255, 255, 0.6);
  }
    .status-but {
 display: inline-block;
      height: 0.4rem;
      padding: 0 0.1rem;
    font-size: 0.2rem;
    background: #f4f4f4;
    line-height: 0.4rem;
    position: relative;
    border-radius: 0.05rem;
    overflow: hidden;
  }
  &.table-item-up {
    .table-item-price,
    .table-item-status {
      color: #d82d27;
    }
  }
  &.table-item-down {
    .table-item-price,
    .table-item-status {
      color: #37a10c;
    }
  }
}
.table-item-list {
  padding: 0.3rem 0rem;
  p {
    margin: 0.1rem;
        word-break: keep-all;
    word-wrap: break-word;
  }
}

.login-dom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1rem;
  // line-height: 1rem;
  font-size: 0.3rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.1);
  color: rgba(228, 152, 41, 1);
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .loginBtn {
    width: 2rem;
    height: 0.68rem;
    line-height: 0.68rem;
    text-align: center;
    color: #ffffff;
    background: rgba(228, 152, 41, 1);
    border-radius: 0.08rem;
  }
}
</style>
